import QtQuick 2.0
import QtMultimedia 5.12
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0

//此处动画
Item {
    id:root

    width: 678
    height: 618

    // 记录播放的视频是第几个,初始化为1
    property int playNum: 1

    property int clickNum: 0

    property int duration: 500

    property int hideItemState: 1

    //视图
    PathView {
        id: iconButtonListView
        width: 75
        height: 550
        x:0
        y:0
        model: iconButtonListModel
        path:pathview_path;
        delegate: iconButton
        interactive:false//禁止鼠标拖动
        snapMode: PathView.SnapOneItem;

        preferredHighlightBegin:0.5;
        preferredHighlightEnd:0.5;

    }

    //路径设置
    Path {
        id: pathview_path
        startX: iconButtonListView.width / 2;startY:75 / 2 ;

        // 0.0
        PathAttribute {name:"itemScale";value:0.55}
        PathAttribute {name:"itemOpacity";value:0.4}
        PathPercent {value:0}

        // 0.2
        PathLine {x:iconButtonListView.width / 2;y:(iconButtonListView.height / 5)*1;}
        PathAttribute {name:"itemScale";value:0.65}
        PathAttribute {name:"itemOpacity";value:0.5}
        PathPercent {value:0.2}

        // 0.4
        PathLine {x:iconButtonListView.width / 2;y:(iconButtonListView.height / 5)*2;}
        PathAttribute {name:"itemScale";value:0.85}
        PathAttribute {name:"itemOpacity";value:0.7}
        PathPercent {value:0.4}

        // 0.6
        PathLine {x:iconButtonListView.width / 2;y:(iconButtonListView.height / 5)*3;}
        PathAttribute {name:"itemScale";value:1}
        PathAttribute {name:"itemOpacity";value:1}
        PathPercent {value:0.6}

        // 0.8
        PathLine {x:iconButtonListView.width / 2;y:(iconButtonListView.height / 5)*4;}
        PathAttribute {name:"itemScale";value:0.65}
        PathAttribute {name:"itemOpacity";value:0.5}
        PathPercent {value:0.8}

        // 1.0
        PathLine {x:iconButtonListView.width / 2;y:(iconButtonListView.height / 5)*5;}
        PathAttribute {name:"itemScale";value:0.55}
        PathAttribute {name:"itemOpacity";value:0.4}
        PathPercent {value:1}
    }

    //模型
    ListModel {
        id: iconButtonListModel
        ListElement {
            src:"qrc:/Icon/chat.png"
        }

        ListElement {
            src:"qrc:/Icon/photo.png"
        }

        ListElement {
            src:"qrc:/Icon/search.png"
        }

        ListElement {
            src:"qrc:/Icon/weather.png"
        }

        ListElement {
            src:"qrc:/Icon/computer.png"
        }
    }

    //上一个视频
    Item {
        id: videoPlayAppUp
        x:0
        y:0
        width: 678
        height: 618
        MediaPlayer {
            id: appVideoPlayUp
            autoPlay: true
            loops:100
            playlist: Playlist {
                id: playlistUp
                PlaylistItem {source:  "qrc:/media/01-chat.mp4" }
            }
        }
        VideoOutput {
            anchors.fill: parent
            source: appVideoPlayUp
        }
    }

    //下一个视频
    Item {
        id: videoPlayAppDown
        x:0
        y:0
        width: 678
        height: 618
        visible: false
        MediaPlayer {
            id: appVideoPlayDown
            autoPlay: true
            loops:100
            playlist: Playlist {
                id: playlistDown
            }
        }
        VideoOutput {
            anchors.fill: parent
            source: appVideoPlayDown
        }
    }

    function firstInitAni() {
        iconButtonListView.decrementCurrentIndex()
        switchAni(0)
        clickNum = 0

        iconButtonListView.decrementCurrentIndex()
        switchAni(1)
        clickNum = 1

        iconButtonListView.decrementCurrentIndex()
        switchAni(2)
        clickNum = 2
    }

    function switchAni(num) {
        playMedia(num)
        if (num === 0){
            if (playNum > 1) {
                //播放从后往前选择
                forwardAnimation()
            } else {
                //不动
            }
            playNum = 1

        } else if (num === 1) {
            if (playNum < 2) {
                backAnimation()
            } else if (playNum > 2){
                forwardAnimation()
            }

            playNum = 2
        } else if (num === 2) {
            if (playNum < 3) {
                backAnimation()
            } else if (playNum > 3){
                forwardAnimation()
            }

            playNum = 3
        } else if (num === 3) {
            if (playNum < 4) {
                backAnimation()
            } else if (playNum > 4){
                forwardAnimation()
            }

            playNum = 4
        } else if (num === 4) {
            if (playNum < 5) {
                backAnimation()
            } else {
                //不动
            }

            playNum = 5
        }

    }

    function backAnimation() {

        if(hideItemState === 0) {
            //videoPlayAppUp 隐藏, 操作videoPlayAppUp来展示

            //方块1 上移消失
            videoPlayAppDown.opacity = 1;
            videoPlayAppDown.x = 0;
            videoPlayAppDown.y = 0;
            videoPlayAppDown.width = 678
            videoPlayAppDown.height = 618
            videoPlayAppDown.rotation = 0;

            //方块2 上移展示
            videoPlayAppUp.opacity = 0;
            videoPlayAppUp.x = 0;
            videoPlayAppUp.y = 200;
            videoPlayAppUp.width = 400
            videoPlayAppUp.height = 390
            videoPlayAppUp.rotation = 0;

            animforward3.restart()
            animforward1.restart()


            hideItemState = 1


        } else {
            //videoPlayAppDown 隐藏, 操作videoPlayAppDown来展示

            //方块1 上移消失
            videoPlayAppUp.opacity = 1;
            videoPlayAppUp.x = 0;
            videoPlayAppUp.y = 0;
            videoPlayAppUp.width = 678
            videoPlayAppUp.height = 618
            videoPlayAppUp.rotation = 0;

            //方块2 上移展示
            videoPlayAppDown.opacity = 0;
            videoPlayAppDown.x = 0;
            videoPlayAppDown.y = 200;
            videoPlayAppDown.width = 400
            videoPlayAppDown.height = 390
            videoPlayAppDown.rotation = 0;
            animBack1.restart()
            animBack2.restart()

            hideItemState = 0
        }
    }

    function forwardAnimation() {

        if(hideItemState === 0) {
            //videoPlayAppUp 隐藏, 操作videoPlayAppUp来展示

            //方块1,下移展示
            videoPlayAppUp.opacity = 0;
            videoPlayAppUp.x = 0;
            videoPlayAppUp.y = 0;
            videoPlayAppUp.width = 400
            videoPlayAppUp.height = 390
            videoPlayAppUp.rotation = 0;

            //方块2，下移消失
            videoPlayAppDown.opacity = 1;
            videoPlayAppDown.x = 0;
            videoPlayAppDown.y = 0;
            videoPlayAppDown.width = 678
            videoPlayAppDown.height = 618
            videoPlayAppDown.rotation = 0;

            animforward1.restart()
            animforward2.restart()

            hideItemState = 1


        } else {
            //videoPlayAppDown 隐藏, 操作videoPlayAppDown来展示
            //方块1,下移展示
            videoPlayAppDown.opacity = 0;
            videoPlayAppDown.x = 0;
            videoPlayAppDown.y = 0;
            videoPlayAppDown.width = 400
            videoPlayAppDown.height = 390
            videoPlayAppDown.rotation = 0;

            //方块2，下移消失
            videoPlayAppUp.opacity = 1;
            videoPlayAppUp.x = 0;
            videoPlayAppUp.y = 0;
            videoPlayAppUp.width = 678
            videoPlayAppUp.height = 618
            videoPlayAppUp.rotation = 0;

            //videoPlayAppDown 下移展示
            animforward6.restart()
            //videoPlayAppUp 下移消失
            animforward4.restart()

            hideItemState = 0

        }
    }


    // 判断逻辑为： 隐藏的视频item 有标志 hideItemState，
    // 0 为 videoPlayAppUp 隐藏
    // 1 为 videoPlayAppDown 隐藏
    // 再根据传过来的参数 num 判断播放哪个视频
    // 更新隐藏的视频Item 播放列表，因为下一步即为展示播放视频
    function playMedia(num){

        if (hideItemState === 0) {
            //更新videoPlayAppUp 播放列表
            //先隐藏最后一帧图片


            //上一个视频暂停
            appVideoPlayUp.stop()

            //playlist 列表清除
            appVideoPlayUp.playlist.clear()

            //根据当前要播放的标志位，加载对应播放路径
            if (num === 0) {
                appVideoPlayUp.playlist.addItem("qrc:/media/01-chat.mp4")

            } else if (num === 1) {
                appVideoPlayUp.playlist.addItem("qrc:/media/02-photo.mp4")

            } else if (num === 2) {
                appVideoPlayUp.playlist.addItem("qrc:/media/03-search.mp4")

            } else if (num === 3) {
                appVideoPlayUp.playlist.addItem("qrc:/media/04-weather.mp4")

            } else if (num === 4) {
                appVideoPlayUp.playlist.addItem("qrc:/media/05-computer.mp4")

            }

            //播放视频
            appVideoPlayUp.play()

        } else {
            //更新videoPlayAppDown 播放列表

            //上一个视频暂停
            appVideoPlayDown.stop()

            //playlist 列表清除
            appVideoPlayDown.playlist.clear()

            //根据当前要播放的标志位，加载对应播放路径
            if (num === 0) {
                appVideoPlayDown.playlist.addItem("qrc:/media/01-chat.mp4")

            } else if (num === 1) {
                appVideoPlayDown.playlist.addItem("qrc:/media/02-photo.mp4")

            } else if (num === 2) {
                appVideoPlayDown.playlist.addItem("qrc:/media/03-search.mp4")

            } else if (num === 3) {
                appVideoPlayDown.playlist.addItem("qrc:/media/04-weather.mp4")

            } else if (num === 4) {
                appVideoPlayDown.playlist.addItem("qrc:/media/05-computer.mp4")

            }

            //播放视频
            appVideoPlayDown.play()

        }

    }

    Component {
        id: iconButton
        RoundButton {
            width: 90
            height: 90
            radius: 90
            scale:PathView.itemScale; //缩放属性
            opacity:PathView.itemOpacity; //透明度

            background: Image {
                source: src
            }

//            DropShadow {
//                anchors.fill: parent
//                horizontalOffset: 0
//                verticalOffset: 0
//                radius: 10
//                samples: 16
//                source: background
//                color: "#239594"
//                opacity:PathView.itemOpacity; //透明度
//                Behavior on radius { PropertyAnimation { duration: 100 } }
//            }

            MouseArea{
                anchors.fill: parent//鼠标检测的作用域
                hoverEnabled: true//开启鼠标滑过检测
                onClicked:function() {
                    switchAni(index)

                    var upnum = clickNum
                    var returnNum = 0
                    var clickpos = "down"

                    for (var i = 0;i < 2 ;i++) {
                        clickpos = "down"

                        returnNum ++
                        upnum ++
                        if (upnum > 4) {
                            upnum = 0
                        }

                        if (upnum === index) {
                            clickpos = "up"
                            for (returnNum; returnNum > 0; returnNum--){
                                iconButtonListView.incrementCurrentIndex();

                            }
                            break;
                        }
                    }

                    if (clickpos === "down") {
                        var downnum = clickNum
                        returnNum = 0
                        for (i = 0;i < 2 ;i++) {
                            returnNum ++
                            downnum --

                            if (downnum < 0) {
                                downnum = 4
                            }

                            if (downnum === index) {
                                for (returnNum; returnNum > 0; returnNum --){
                                    iconButtonListView.decrementCurrentIndex();

                                }
                                break;
                            }
                        }
                    }
                    clickNum = index

                }
            }
        }
    }

    //videoPlayAppUp 上移消失动画
    ParallelAnimation {
        id: animBack1

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppUp
            properties: "y"
            to: 0
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "width"
            to: 400
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "height"
            to: 390
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4
        }
    }


    //videoPlayAppDown 上移展示
    ParallelAnimation {
        id: animBack2

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppDown
            properties: "y"
            to: 0
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "width"
            to: 678
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "height"
            to: 618
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "opacity"
            to: 1
            duration: root.duration * 0.4

        }

        onStarted: {
            videoPlayAppDown.visible = true

        }
    }

    //videoPlayApp 上移展示
    ParallelAnimation {
        id: animforward1

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppUp
            properties: "y"
            to: 0
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "width"
            to: 678
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "height"
            to: 618
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "opacity"
            to: 1
            duration: root.duration * 0.4

        }
    }

    //videoPlayAppUp 下移消失
    ParallelAnimation {
        id: animforward4

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppUp
            properties: "y"
            to: 200
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "width"
            to: 400
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "height"
            to: 390
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4

        }
    }

    //videoPlayAppUp 下移消失
    ParallelAnimation {
        id: animforward5

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppUp
            properties: "y"
            to: 200
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "width"
            to: 400
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "height"
            to: 390
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppUp
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4

        }
    }


    //videoPlayAppDown 下移消失
    ParallelAnimation {
        id: animforward2

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppDown
            properties: "y"
            to: 200
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "width"
            to: 400
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "height"
            to: 390
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4

        }

        onStarted: {
            videoPlayAppDown.visible = true

        }
    }

    //videoPlayAppDown 上移消失动画
    ParallelAnimation {
        id: animforward3

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppDown
            properties: "y"
            to: 0
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "width"
            to: 400
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "height"
            to: 390
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "opacity"
            to: 0
            duration: root.duration * 0.4

        }

        onStarted: {
            videoPlayAppDown.visible = true

        }
    }

    //videoPlayAppDown 下移展示
    ParallelAnimation {
        id: animforward6

        //控制y轴移动
        NumberAnimation {
            target: videoPlayAppDown
            properties: "y"
            to: 0
            duration: root.duration * 0.4
        }

        //调整宽度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "width"
            to: 678
            duration: root.duration * 0.4
        }

        //调整高度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "height"
            to: 618
            duration: root.duration * 0.4
        }

        //调整透明度
        NumberAnimation {
            target: videoPlayAppDown
            properties: "opacity"
            to: 1
            duration: root.duration * 0.4

        }

        onStarted: {
            videoPlayAppDown.visible = true

        }
    }
}
